﻿@using System.Globalization
@using BookShop.DTO
@using BookShop.Library.Common
@using BookShop.Library.Constant
@using HTN.Library
@model BookShop.Site.Models.HomeViewModel
@{
    ViewBag.Title = "Chi tiết sách | Book Shop Ngân Hà";
    var customer = (Customer)Session[SessionKey.Customer] ?? new Customer { Id = 0 };
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li><a href="@Url.Action("ProductPage", "Home")">Sản phẩm</a></li>

    <li class="active">@Model.DetailBook.Title</li>
</ul>

<div class="row margin-bottom-40">
    @{
        Html.RenderPartial("_CategorySidebar", Model);
    }
    @if (Model != null && Model.DetailBook != null)
    {
        <div class="col-md-9 col-sm-7">
            <div class="product-page">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="product-main-image">
                            <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), Model.DetailBook.PictureUrl)" alt="@Model.DetailBook.Title" class="img-responsive my-img" data-bigimgsrc="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), Model.DetailBook.PictureUrl)">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <h1>@Model.DetailBook.Title</h1>
                        <div class="price-availability-block my-price-block clearfix">
                            <div class="price">
                                @if (Model.DetailBook.IsOnSale)
                                {
                                    <strong>@Model.DetailBook.DiscountPrice.ToString(CultureInfo.CreateSpecificCulture("en-US"))<span>(Đ)</span></strong>
                                    <em><span>@Model.DetailBook.Price.ToString(CultureInfo.CreateSpecificCulture("en-US"))</span>(Đ)</em>
                                }
                                else
                                {
                                    <strong>@Model.DetailBook.Price.ToString(CultureInfo.CreateSpecificCulture("en-US")) <span>(Đ)</span> </strong>
                                }
                            </div>
                            <div class="availability">
                                Trong kho: @if (Model.DetailBook.InStock)
                                           {
                                    <strong>Còn hàng</strong>
                                           }
                                           else
                                           {
                                    <strong>Hết hàng</strong>
                                           }
                            </div>
                        </div>
                        <div class="description">
                        </div>
                        <div class="product-page-options">
                            <div class="pull-left">
                                <label class="control-label">Tác giả:</label>
                                <p>@Model.DetailBook.AuthorName</p>
                            </div>
                            <div class="pull-left">
                                <label class="control-label">Thể loại:</label>
                                <p><a href="@Url.Action("ProductPage", "Home", new { categoryId = Model.DetailBook.CategoryId })">@Model.DetailBook.CategoryName</a></p>
                            </div>
                        </div>
                        <div class="product-page-cart">
                            <div class="product-quantity">
                                <input id="product-quantity" type="text" value="1" readonly class="form-control input-sm">
                            </div>
                            <button class="btn btn-primary" type="button" onclick="addCartItem($('#product-quantity').val(), '@Model.DetailBook.Id');">Thêm vào giỏ hàng</button>
                        </div>
                        <div class="review">
                            <input type="range" value="@(Model.DetailBook.AverageRatePoint.HasValue ? Model.DetailBook.AverageRatePoint.Value.ToString(CultureInfo.CreateSpecificCulture("en-US")) : string.Empty)" step="0.25" id="backing4">
                            <div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true" data-rateit-min="0" data-rateit-max="5" data-rateit-readonly="true">
                            </div>
                            <a href="#Reviews" data-toggle="tab" onclick="reviewTabToggle();">@Model.DetailBook.RateComments.Count bình luận</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#Reviews" data-toggle="tab" onclick="reviewTabToggle();">Viết bình luận</a>
                        </div>
                    </div>

                    <div class="product-page-content">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#Description" data-toggle="tab">Mô tả</a></li>
                            <li><a href="#Information" data-toggle="tab">Thông tin</a></li>
                            <li id="review-li-tab"><a href="#Reviews" style="width: 110px;" data-toggle="tab">Bình luận (@Model.DetailBook.RateComments.Count)</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="Description">
                                <p>@Html.Raw(Model.DetailBook.Description)</p>
                            </div>
                            <div class="tab-pane fade" id="Information">
                                <table class="datasheet">
                                    <tr>
                                        <th colspan="2">Thông tin chi tiết</th>
                                    </tr>
                                    <tr>
                                        <td class="datasheet-features-type">Nhà xuất bản</td>
                                        <td>@Model.DetailBook.PublisherName</td>
                                    </tr>
                                    <tr>
                                        <td class="datasheet-features-type">Ngày xuất bản</td>
                                        <td>@(Model.DetailBook.PublishDate.HasValue ? Model.DetailBook.PublishDate.Value.ToString("MM-yyyy", CultureInfo.CreateSpecificCulture("vi-VN")) : string.Empty)</td>
                                    </tr>
                                    <tr>
                                        <td class="datasheet-features-type">Kích thước</td>
                                        <td>@Model.DetailBook.Size</td>
                                    </tr>
                                    <tr>
                                        <td class="datasheet-features-type">Số trang</td>
                                        <td>@Model.DetailBook.PageNumber</td>
                                    </tr>
                                    <tr>
                                        <td class="datasheet-features-type">Thể loại</td>
                                        <td><a href="@Url.Action("ProductPage", "Home", new { categoryId = Model.DetailBook.CategoryId })">@Model.DetailBook.CategoryName</a></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="Reviews">
                                <!--<p>There are no reviews for this product.</p>-->
                                @if (Model.DetailBook.RateComments == null || Model.DetailBook.RateComments.Count == 0)
                                {
                                    <p>Không có bình luận nào cho sản phẩm này.</p>
                                }
                                else
                                {
                                    foreach (var rateComment in Model.DetailBook.RateComments)
                                    {
                                    <div class="review-item clearfix">
                                        <div class="review-item-submitted">
                                            <strong>@rateComment.CustomerName</strong>
                                            <em>@rateComment.CreateTime.ToString("g", CultureInfo.CreateSpecificCulture("vi-VN"))</em>
                                            <div class="rateit" data-rateit-value="@rateComment.RatePoint.ToString(CultureInfo.CreateSpecificCulture("en-US"))" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                        </div>
                                        <div class="review-item-content">
                                            <p>@Html.Raw(rateComment.CommentContent)</p>
                                        </div>
                                    </div>
                                    }
                                }
                                @if (Session[SessionKey.Customer] != null)
                                {
                                    <!-- BEGIN FORM-->
                                    <form action="@Url.Action("RateComment")" class="reviews-form" role="form">
                                        <input type="hidden" name="bookId" id="bookId" value="@Model.DetailBook.Id"/>
                                        <input type="hidden" name="customerId" id="customerId" value="@customer.Id"/>
                                        <h2>Viết bình luận</h2>
                                        <div class="form-group">
                                            <label for="review">Bình luận <span class="require">*</span></label>
                                            <textarea class="form-control ckeditor" rows="8" id="review" name="review"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="email">Đánh giá</label>
                                            <input type="range" value="0" step="0.5" id="backing5" name="ratePoint">
                                            <div class="rateit" data-rateit-backingfld="#backing5" data-rateit-resetable="false" data-rateit-ispreset="true" data-rateit-min="0" data-rateit-max="5">
                                            </div>
                                        </div>
                                        <div class="padding-top-20">
                                            <button type="submit" class="btn btn-primary">Gửi</button>
                                        </div>
                                    </form>
                                    <!-- END FORM-->
                                }
                                else
                                {
                                    <div class="padding-top-20">
                                        <a href="@Url.Action("Login", "Account", new { previousUrl = Request.RawUrl })" class="btn btn-primary">Đăng nhập để bình luận</a>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                    @if (Model.DetailBook.IsNew)
                    {
                        <div class="sticker sticker-new"></div>
                    }
                    @if (Model.DetailBook.IsOnSale)
                    {
                        <div class="sticker sticker-sale"></div>
                    }
                </div>
            </div>
        </div>
    }
</div>

<div class="row margin-bottom-40">
    <!-- BEGIN SALE PRODUCT -->
    <div class="col-md-12 sale-product">
        <h2>Sách cùng tác giả</h2>
        <div class="owl-carousel owl-carousel4">
            @if (Model != null)
            {
                if (Model.SameAuthorBookList != null)
                {
                    foreach (var book in Model.SameAuthorBookList)
                    {
                <div>
                    <div class="product-item">
                        <div class="pi-img-wrapper">
                            <img src="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), book.PictureUrl)" class="img-responsive" alt="@book.Title"/>
                            <div>
                                <a href="@Utility.UrlCombine(CommonFunction.GetConfigValue("SiteUrl"), book.PictureUrl)" class="btn btn-default fancybox-button">Zoom</a>
                                <a href="#product-pop-up" class="btn btn-default fancybox-fast-view">Chi tiết</a>
                            </div>
                        </div>
                        <h3><a href="@Url.Action("Detail", "Book")">@book.Title</a></h3>
                        <div class="pi-price">@book.Price (Đ)</div>
                        <a href="javascript:addCartItem(1,'@book.Id');" class="btn btn-default add2cart">Giỏ hàng</a>
                        @if (book.IsNew)
                        {
                            <div class="sticker sticker-new"></div>
                        }
                        @if (book.IsOnSale)
                        {
                            <div class="sticker sticker-sale"></div>
                        }
                    </div>
                </div>
                    }
                }
            }
        </div>
    </div>
    <!-- END SALE PRODUCT -->
</div>

@section Css{
    <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <link href="~/Content/assets/frontend/pages/css/jquery-ui.css" rel="stylesheet" type="text/css">
    <!-- for slider-range -->
    <link href="~/Content/assets/global/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
}

@section Javascript{
    <script src="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src='~/Content/assets/global/plugins/zoom/jquery.zoom.min.js' type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
    <script src="~/Content/assets/frontend/pages/scripts/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/Content/assets/global/plugins/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".product-quantity .form-control").TouchSpin({
                buttondown_class: "btn quantity-down",
                buttonup_class: "btn quantity-up",
                min: 0,
                max: 30

            });
            $(".quantity-down").html("<i class='fa fa-angle-down'></i>");
            $(".quantity-up").html("<i class='fa fa-angle-up'></i>");
            $(".owl-carousel4").owlCarousel({
                pagination: false,
                navigation: true,
                items: 4,
                addClassActive: true,
            });
            $('.product-main-image').zoom({ url: $('.product-main-image img').attr('data-BigImgSrc') });
            CKEDITOR.replace('review', {
                toolbar: [{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] }]
            });
        });
        function reviewTabToggle() {
            var liList = $('#myTab').children();
            $.each(liList, function (i, liChild) {
                $(liChild).removeClass("active");
            });
            $('#review-li-tab').addClass("active");
        }
    </script>
}
